Foundational skills to build mockups in Figma 在 Figma 中製作 Mockup 的基礎技能

這是你在使用 Figma 建立 mockup 前需要掌握的一些基礎技能與知識點：

基礎術語

• 檔案（File）：Figma 中的設計文件

• 頁面（Page）：每個檔案可以包含多個頁面

• 畫布（Canvas）：頁面中的工作區，用於設計

• 圖層與物件（Layers & Objects）：你在畫布上建立的所有元素

1. 建立新頁面

• 登入 Figma

• 點選右上角的+建立一個新的 Design 檔案

• 在左側點選Page 1，檢視所有頁面

• 再點選+新增新頁面

• 可立即重新命名頁面，或雙擊頁面名稱後修改

2. 建立畫框（Frame）

畫框就是你設計的“畫布區域”，如手機螢幕或網頁。

• 在工具欄點選 Frame Tool（第四個圖示，像一個網格）

• 建立方式：
  • 點選畫布：生成預設大小 100x100 畫素的畫框
  • 拖拽生成：手動設定畫框大小
  • 右側 Design 面板：選擇預設裝置尺寸，如 iPhone、iPad、Web 等

3. 標籤頁操作技巧

在 Figma 的“草稿”或“最近檔案”中右鍵檔案 → 選擇“Open in new tab”即可同時開啟多個標籤頁，方便對照與比較

4. 鍵盤快捷鍵推薦

熟悉快捷鍵可以提升效率：Shortcuts.design提供了 Figma 的常用快捷鍵集合。

5. 裝置尺寸庫

Figma 內建有裝置尺寸，也可以從Figma Community獲取更多尺寸模板。